import { useContext, useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { AuthContext } from '@/contexts/authContext';
import { ThemeContext } from '@/App';
import { Toaster, toast } from 'sonner';
import { Heart, Search, Bell, UserCircle, Brain, Sparkles, Star, Clock, Moon, Sun, MessageCircle } from 'lucide-react';

// 定义故事数据类型
interface Story {
  id: string;
  title: string;
  description: string;
  pageCount: number;
  date: string;
  isCollected: boolean;
  keywords?: string[];
  uniquenessScore?: number;
}

// 定义AI推荐类型
interface AIRecommendation {
  id: string;
  type: 'story' | 'character' | 'theme';
  title: string;
  description: string;
  score: number;
  icon: string;
}

export default function Home() {
  const { isAuthenticated, currentUser, logout } = useContext(AuthContext);
  const { isDark, toggleDarkMode } = useContext(ThemeContext);
  const navigate = useNavigate();
  
  // 精选童话故事数据
  const [featuredStories, setFeaturedStories] = useState<Story[]>([
    {
      id: '1',
      title: '小狐狸的星空冒险',
      description: '在一个星光璀璨的夜晚，小狐狸星星望着天空中闪烁的星星，心中充满了好奇。突然，一颗金色的星星从天空中坠落，落在了森林边缘。',
      pageCount: 7,
      date: '2025/10/3',
      isCollected: true,
      keywords: ['童话', '星空', '冒险'],
      uniquenessScore: 95
    },
    {
      id: '2',
      title: '小熊的魔法森林奇遇',
      description: '小熊贝贝在森林里玩耍时，发现了一个隐藏在灌木丛中的神秘入口。好奇心驱使它走了进去，发现了一个它从未见过的魔法森林。',
      pageCount: 7,
      date: '2025/10/2',
      isCollected: true,
      keywords: ['童话', '魔法', '森林'],
      uniquenessScore: 92
    },
    {
      id: '3',
      title: '小兔子与彩虹桥的约定',
      description: '小兔子朵朵是森林里最害羞的动物，直到有一天它遇到了小松鼠豆豆。他们一起在彩虹桥上玩耍，建立了深厚的友谊。',
      pageCount: 6,
      date: '2025/10/1',
      isCollected: false,
      keywords: ['童话', '友谊', '成长'],
      uniquenessScore: 90
    },
    {
      id: '4',
      title: '小海豚的海底寻宝之旅',
      description: '小海豚蓝蓝和小海龟绿绿组成探险队，在神秘的海底世界寻找传说中的宝藏，途中遇到了许多有趣的海洋生物。',
      pageCount: 8,
      date: '2025/09/30',
      isCollected: false,
      keywords: ['童话', '海洋', '探险'],
      uniquenessScore: 88
    }
  ]);
  
  // AI推荐内容
  const [aiRecommendations, setAIRecommendations] = useState<AIRecommendation[]>([]);
  const [isLoadingRecommendations, setIsLoadingRecommendations] = useState(true);
  const [userPreferences, setUserPreferences] = useState<Record<string, number>>({});

  // 切换收藏状态
  const toggleCollection = (storyId: string) => {
    const updatedStories = featuredStories.map(story => 
      story.id === storyId 
        ? { ...story, isCollected: !story.isCollected } 
        : story
    );
    
    setFeaturedStories(updatedStories);
    
    // 获取被操作的故事
    const story = updatedStories.find(s => s.id === storyId);
    if (story) {
      try {
        // 获取已有的收藏列表
        const collections = localStorage.getItem('collectedStories');
        let parsedCollections: { id: string; title: string; description: string; pageCount: number; date: string }[] = [];
        
        if (collections) {
          parsedCollections = JSON.parse(collections);
        }
        
        if (story.isCollected) {
          // 检查故事是否已在收藏中
          const isAlreadyCollected = parsedCollections.some(collected => collected.id === story.id);
          
          if (!isAlreadyCollected) {
            // 添加到收藏
            const newCollection = {
              id: story.id,
              title: story.title,
              description: story.description,
              pageCount: story.pageCount,
              date: new Date().toLocaleDateString('zh-CN')
            };
            parsedCollections.push(newCollection);
            toast('收藏成功');
            
            // 更新用户偏好
            updateUserPreferences(story.keywords || []);
          } else {
            toast('故事已在收藏中');
          }
        } else {
          // 从收藏中移除
          parsedCollections = parsedCollections.filter(collectedStory => collectedStory.id !== story.id);
          toast('已取消收藏');
        }
        
        // 保存回localStorage前确保数据唯一
        const uniqueCollections = Array.from(new Map(parsedCollections.map(story => [story.id, story])).values());
        localStorage.setItem('collectedStories', JSON.stringify(uniqueCollections));
      } catch (error) {
        console.error('Failed to update collection status:', error);
        toast('操作失败，请稍后再试');
      }
    }
  };

  // 更新用户偏好
  const updateUserPreferences = (keywords: string[]) => {
    try {
      const currentPrefs = { ...userPreferences };
      keywords.forEach(keyword => {
        currentPrefs[keyword] = (currentPrefs[keyword] || 0) + 1;
      });
      setUserPreferences(currentPrefs);
      localStorage.setItem('userPreferences', JSON.stringify(currentPrefs));
      
      // 重新生成推荐
      generateAIRecommendations(currentPrefs);
    } catch (error) {
      console.error('Failed to update user preferences:', error);
    }
  };

  // 生成AI推荐
  const generateAIRecommendations = (prefs: Record<string, number>) => {
    setIsLoadingRecommendations(true);
    
    // 模拟AI思考过程
    setTimeout(() => {
      // 基于用户偏好生成推荐
      const recommendations: AIRecommendation[] = [];
      
      // 热门角色推荐
      recommendations.push({
        id: 'char1',
        type: 'character',
        title: '小狐狸',
        description: '聪明勇敢的小狐狸最适合冒险故事',
        score: 95,
        icon: '🦊'
      });
      
      // 热门主题推荐
      recommendations.push({
        id: 'theme1',
        type: 'theme',
        title: '魔法奇幻',
        description: '充满想象力的魔法世界，适合激发创造力',
        score: 92,
        icon: '🔮'
      });
      
      // 个性化故事推荐
      const highestPrefKeyword = Object.entries(prefs)
        .sort(([,a], [,b]) => b - a)
        .map(([keyword]) => keyword)[0];
      
      if (highestPrefKeyword) {
        recommendations.push({
          id: 'story1',
          type: 'story',
          title: `探索${highestPrefKeyword}的奇妙故事`,
          description: `基于您的兴趣，AI特别推荐的${highestPrefKeyword}主题故事`,
          score: 90,
          icon: '📚'
        });
      } else {
        // 默认推荐
        recommendations.push({
          id: 'story1',
          type: 'story',
          title: '星空魔法师的学徒',
          description: '一段奇妙的星空探险故事，适合激发想象力',
          score: 88,
          icon: '📚'
        });
      }
      
      setAIRecommendations(recommendations);
      setIsLoadingRecommendations(false);
    }, 1000);
  };

  // 不需要强制登录，可以浏览首页内容

  // 加载用户偏好和生成推荐
  useEffect(() => {
    try {
      const savedPrefs = localStorage.getItem('userPreferences');
      if (savedPrefs) {
        const parsedPrefs = JSON.parse(savedPrefs);
        setUserPreferences(parsedPrefs);
        generateAIRecommendations(parsedPrefs);
      } else {
        // 默认偏好
        generateAIRecommendations({});
      }
    } catch (error) {
      console.error('Failed to load user preferences:', error);
      generateAIRecommendations({});
    }
  }, []);
  
  // 监听localStorage中收藏状态的变化，确保首页和收藏页同步
  useEffect(() => {
    const handleStorageChange = () => {
      // 重新检查所有故事的收藏状态
      try {
        const collections = localStorage.getItem('collectedStories');
        if (collections) {
          const parsedCollections: { id: string }[] = JSON.parse(collections);
          const updatedStories = featuredStories.map(story => ({
            ...story,
            isCollected: parsedCollections.some(collected => collected.id === story.id)
          }));
          setFeaturedStories(updatedStories);
        }
      } catch (error) {
        console.error('Failed to update collection status from storage:', error);
      }
    };

    // 监听localStorage变化
    window.addEventListener('storage', handleStorageChange);
    
    // 组件卸载时移除监听
    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, [featuredStories]);

  // 页面加载时预先生成一些故事的图片
  useEffect(() => {
    const preloadStoryImages = async () => {
      try {
        // 检查是否已经预加载过图片
        const hasPreloaded = localStorage.getItem('preloadedImages');
        if (!hasPreloaded) {
          // 为热门故事预生成一些图片，但不显示加载提示
          
          // 创建临时故事对象用于预生成图片
          const tempStories = [
            {
              id: '1',
              title: '小狐狸的星空冒险',
              description: '在一个星光璀璨的夜晚，小狐狸星星望着天空中闪烁的星星，心中充满了好奇。突然，一颗金色的星星从天空中坠落，落在了森林边缘。',
              content: ['在一个星光璀璨的夜晚，小狐狸星星望着天空中闪烁的星星，心中充满了好奇。突然，一颗金色的星星从天空中坠落，落在了森林边缘。'], // 使用描述作为内容示例
              pageCount: 1,
              keywords: ['童话', '冒险', '友谊'], // 默认关键词
              moral: '勇敢面对困难，珍惜友谊',
              generationTime: 0
            },
            {
              id: '2',
              title: '小熊的魔法森林奇遇',
              description: '小熊贝贝在森林里玩耍时，发现了一个隐藏在灌木丛中的神秘入口。好奇心驱使它走了进去，发现了一个它从未见过的魔法森林。',
              content: ['小熊贝贝在森林里玩耍时，发现了一个隐藏在灌木丛中的神秘入口。好奇心驱使它走了进去，发现了一个它从未见过的魔法森林。'], // 使用描述作为内容示例
              pageCount: 1,
              keywords: ['童话', '冒险', '友谊'], // 默认关键词
              moral: '勇敢面对困难，珍惜友谊',
              generationTime: 0
            }
          ];
          
          // 为每个故事预生成图片
          for (const tempStory of tempStories) {
            // 这里简化处理，只为每个故事生成一张图片
            const { enhanceForImageGeneration } = await import('@/lib/aiUtils');
            const { generateImageUrl, cacheImage } = await import('@/lib/aiUtils');
            const enhancedPrompt = enhanceForImageGeneration(tempStory.content[0]);
            const fullPrompt = `${enhancedPrompt} 童话故事:《${tempStory.title}》, 关键词:${tempStory.keywords.join(', ')}`;
            const imageUrl = generateImageUrl(fullPrompt);
            cacheImage(fullPrompt, imageUrl);
            
            // 添加延迟避免请求过多
            await new Promise(resolve => setTimeout(resolve, 100));
          }
          
          // 标记为已预加载
          localStorage.setItem('preloadedImages', 'true');
        }
      } catch (error) {
        console.error('Error preloading story images:', error);
      }
    };
    
     // 在组件挂载后执行预加载，但使用try-catch避免错误影响页面加载
    preloadStoryImages();
  }, []); // 空依赖数组，只在组件挂载时执行一次
  // 未登录时也显示首页内容，但有些功能可能受限
  // 用户点击需要登录的操作时才会跳转到登录页面

  // 处理推荐点击
  const handleRecommendationClick = (recommendation: AIRecommendation) => {
    if (recommendation.type === 'story') {
      // 导航到故事阅读页
      navigate('/generate');
    } else if (recommendation.type === 'character' || recommendation.type === 'theme') {
      // 导航到生成页并带上参数
      navigate({
        pathname: '/generate',
        search: `?preselect=${recommendation.type}=${encodeURIComponent(recommendation.title)}`
      });
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-pink-50 to-blue-50 flex flex-col pb-24 text-gray-800">
      <div className="container mx-auto flex-1 flex flex-col">
      <Toaster />
      
         {/* 顶部导航栏 */}
      <header className={`${isDark ? 'bg-gray-800/90 border-gray-700' : 'bg-white/80 border-pink-100'} backdrop-blur-md px-4 py-3 flex justify-between items-center shadow-sm`}>
        <div className="flex items-center">
          <span className="text-2xl font-bold text-gradient">
            <span className="text-pink-400">✨</span> 智绘童话AI工场
          </span>
        </div>
         
        <div className="flex space-x-4">
          <button 
            onClick={toggleDarkMode}
            className={`p-2 ${isDark ? 'bg-gray-700 text-yellow-400' : 'bg-gradient-to-r from-pink-100 to-blue-100 text-pink-400'} rounded-full hover:from-pink-200 hover:to-blue-200 transition-colors focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800`}
            aria-label={isDark ? "切换到亮色模式" : "切换到护眼模式"}
            title={isDark ? "切换到亮色模式" : "切换到护眼模式"}
          >
            {isDark ? <Sun size={18} /> : <Moon size={18} />}
          </button>
          <button className={`p-2 ${isDark ? 'text-gray-300 hover:text-pink-400' : 'text-gray-500 hover:text-pink-500'} transition-colors`} title="搜索故事">
            <Search size={20} />
          </button>
          <button className={`p-2 ${isDark ? 'text-gray-300 hover:text-pink-400' : 'text-gray-500 hover:text-pink-500'} transition-colors`} title="通知">
            <Bell size={20} />
          </button>
          <button 
            className="flex items-center space-x-2 cursor-pointer"
            onClick={() => navigate('/profile')}
            title="个人中心"
          >
            <div className="w-8 h-8 rounded-full bg-gradient-to-r from-pink-100 to-blue-100 flex items-center justify-center border border-pink-200">
              <UserCircle size={18} className="text-pink-400" />
            </div>
            <span className="text-gray-700">{currentUser || '小朋友'}</span>
          </button>
        </div>
      </header>

       {/* 智能体问候区域 - 让童话家直接登场 */}
      <section className="px-6 pt-8 pb-6">
        <div className="bg-gradient-to-r from-pink-100 to-blue-100 rounded-xl border border-pink-200 p-6 shadow-md flex flex-col md:flex-row gap-6">
          {/* 智能体形象 */}
            <div className="w-24 h-24 bg-gradient-to-br from-pink-200 to-blue-200 rounded-full flex items-center justify-center border-4 border-white/80 shadow-lg flex-shrink-0 overflow-hidden">
                <img 
                  src="https://lf-code-agent.coze.cn/obj/x-ai-cn/307173148162/attachment/e7cb1a9e560c13e8924d04f1d807bc45_20251022234653.jpg" 
                  alt="童话家智能助手" 
                  className="w-full h-full object-cover" 
                />
            </div>
          
          {/* 智能体问候语 */}
          <div className="flex-1">
            <h1 className="text-2xl md:text-3xl font-bold text-gradient flex items-center">
              童话家
              <span className="ml-2 text-sm bg-pink-100 text-pink-500 px-2 py-1 rounded-full border border-pink-200">AI故事伙伴</span>
            </h1>
            <p className="text-xl mt-3 text-gray-700">
              你好呀，{currentUser || '小朋友'}！我是你的故事伙伴童话家！
            </p>
            <p className="text-gray-600 mt-2">
              我可以帮你创造故事、给你讲灵感，还能为你画插图。你想从哪里开始呢？
            </p>
            
            {/* 智能体建议的操作 */}
            <div className="flex flex-wrap gap-3 mt-4">
               <button 
                 onClick={() => {
                   if (isAuthenticated) {
                     navigate('/generate');
                   } else {
                     navigate('/login');
                   }
                 }}
                 className="bg-gradient-to-r from-pink-500 to-blue-500 text-white font-medium py-2.5 px-5 rounded-full hover:opacity-90 transition-all duration-300 flex items-center btn-gradient shadow-md transform hover:scale-105"
               >
                <span className="mr-2 text-lg">✨</span> 创造新故事
              </button>
              <button 
                onClick={() => {
                  // 打开智能体对话面板
                  const agentButton = document.getElementById('agent-float-button');
                  if (agentButton) {
                    agentButton.click();
                  }
                }}
                className="bg-white text-pink-500 border border-pink-200 font-medium py-2.5 px-5 rounded-full hover:border-pink-400 transition-all duration-300 flex items-center shadow-sm"
              >
                <MessageCircle size={18} className="mr-2" /> 和我聊聊
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* 儿童友好提示 */}
      <section className="px-6 mb-8">
        <div className="bg-gradient-to-r from-pink-100 to-blue-100 p-4 rounded-xl border border-pink-200 shadow-sm">
          <div className="flex items-center">
            <div className="text-2xl mr-3">🌈</div>
            <p className="text-pink-600 font-medium">所有故事都经过精心筛选，适合4-12岁儿童阅读，家长可以放心让孩子探索神奇的童话世界！</p>
          </div>
        </div>
      </section>

      {/* 热门推荐区域 */}
      <section className="px-6 mb-8">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-bold text-gray-800 flex items-center">
            <span className="text-2xl mr-2">🔥</span> 
            热门童话
          </h2>
          <span className="text-sm text-pink-500 flex items-center">
            <Sparkles size={14} className="mr-1" />
            小朋友们都在看
          </span>
        </div>
        
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
          {isLoadingRecommendations ? (
            // 加载状态
            Array(3).fill(0).map((_, index) => (
              <div key={index} className="bg-white rounded-xl border border-pink-100 p-4 shadow-sm animate-pulse">
                <div className="h-8 bg-pink-100 rounded w-1/2 mb-2"></div>
                <div className="h-4 bg-pink-100 rounded w-full mb-3"></div>
                <div className="flex justify-between items-center">
                  <div className="h-6 bg-pink-100 rounded-full w-16"></div>
                  <div className="w-10 h-10 rounded-full bg-pink-100"></div>
                </div>
              </div>
            ))
          ) : (
            // 推荐内容
            aiRecommendations.map((recommendation) => (
              <div 
                key={recommendation.id} 
                className="bg-white rounded-xl border border-pink-100 p-4 shadow-sm hover:border-pink-300 hover:shadow-md transition-all duration-300 cursor-pointer card-gradient transform hover:translate-y-[-4px]"
                onClick={() => handleRecommendationClick(recommendation)}
              >
                <div className="flex justify-between items-start mb-2">
                  <h3 className="text-lg font-semibold text-gray-800">{recommendation.title}</h3>
                  <div className="w-12 h-12 rounded-full bg-gradient-to-r from-pink-100 to-blue-100 flex items-center justify-center text-2xl shadow-sm">
                    {recommendation.icon}
                  </div>
                </div>
                <p className="text-gray-600 text-sm mb-3">{recommendation.description}</p>
                <div className="flex justify-between items-center">
                  <div className="flex items-center">
                    <span className="text-xs bg-pink-100 text-pink-500 px-2 py-0.5 rounded-full flex items-center">
                      <Star size={12} className="mr-1 text-yellow-500" />
                      {recommendation.score}%小朋友喜欢
                    </span>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>
      </section>

      {/* 精选童话故事 */}
      <section className="px-6 mb-8">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-xl font-bold text-gray-800 flex items-center">
            <span className="text-2xl mr-2">📚</span> 
            精选童话故事
          </h2>
        </div>

         {/* 故事分类标签 */}
      <div className="flex flex-wrap gap-2 mb-4">
        <button className="px-4 py-1.5 bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 rounded-full text-sm font-medium">勇敢冒险</button>
        <button className="px-4 py-1.5 bg-white border border-pink-100 text-gray-600 rounded-full text-sm font-medium hover:border-pink-300 transition-colors">友谊成长</button>
        <button className="px-4 py-1.5 bg-white border border-pink-100 text-gray-600 rounded-full text-sm font-medium hover:border-pink-300 transition-colors">魔法奇幻</button>
        <button className="px-4 py-1.5 bg-white border border-pink-100 text-gray-600 rounded-full text-sm font-medium hover:border-pink-300 transition-colors">自然科普</button>
      </div>

        {/* 故事列表 */}
        <div className="space-y-4">
           {featuredStories.map(story => (
            <div key={story.id} className="bg-white rounded-xl p-4 border border-pink-100 hover:border-pink-300 transition-all duration-300 shadow-sm hover:shadow-md card-gradient transform hover:translate-y-[-2px]">
              <div className="flex flex-col md:flex-row gap-4">
             {/* 故事缩略图 */}
             <div className="w-12 h-12 bg-gradient-to-r from-pink-100 to-blue-100 rounded-full flex items-center justify-center text-xl shadow-sm border border-pink-200 flex-shrink-0">
               {
                 story.title.includes('小狐狸') ? '🦊' : 
                 story.title.includes('小熊') ? '🐻' : 
                 story.title.includes('小兔子') ? '🐰' : 
                 story.title.includes('小海豚') ? '🐬' : '📖'
               }
             </div>
                 
             {/* 故事内容 */}
             <div className="ml-4 flex-1">
               <div>
                 <h3 className="text-lg font-semibold text-gray-800 flex items-center">
                   <span className="mr-2 text-pink-400">✨</span> {story.title}
                 </h3>
                 <p className="text-gray-600 text-sm mt-1 line-clamp-2">{story.description}</p>
               </div>
               
               <div className="flex flex-wrap items-center mt-2 gap-2">
                 <span className="text-xs bg-blue-50 text-blue-500 px-2 py-0.5 rounded-full flex items-center">
                   <Clock size={12} className="mr-1" /> {story.pageCount} 页
                 </span>
                 <span className="text-xs bg-green-50 text-green-500 px-2 py-0.5 rounded-full flex items-center">
                   <span className="mr-1">👶</span> 4-8岁
                 </span>
                 {story.isCollected && <span className="text-xs bg-pink-50 text-pink-500 px-2 py-0.5 rounded-full flex items-center">
                   <Heart size={12} className="mr-1 fill-current" /> 已收藏
                 </span>}
               </div>
               
               {story.keywords && story.keywords.length > 0 && (
                 <div className="flex flex-wrap gap-2 mt-2">
                   {story.keywords.map((keyword, index) => (
                     <span key={index} className="text-xs bg-pink-50 text-pink-500 px-2 py-0.5 rounded-full border border-pink-100">
                       {keyword}
                     </span>
                   ))}
                 </div>
               )}
                  
                  {/* 操作按钮 - 统一放在后面 */}
                  <div className="flex justify-end mt-3 gap-2">
                    <button 
                      onClick={() => toggleCollection(story.id)}
                      className={`p-2 rounded-full ${story.isCollected ? 'text-pink-500 bg-pink-100' : 'text-gray-400 hover:text-pink-500'}`}
                      title={story.isCollected ? "取消收藏" : "添加收藏"}
                    >
                      <Heart size={20} className={story.isCollected ? 'fill-current' : ''} />
                    </button>
                       <button 
                         onClick={() => {
                           if (isAuthenticated) {
                             navigate(`/read/${story.id}`);
                           } else {
                             navigate('/login');
                           }
                         }}
                         className="bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 text-sm px-3 py-1 rounded-full hover:from-pink-200 hover:to-blue-200 transition-colors">
                           开始阅读
                         </button>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>



      {/* 家长指南 */}
      <section className="px-6 mb-8">
        <div className="bg-white rounded-xl border border-pink-100 p-5 shadow-sm">
          <h3 className="text-lg font-semibold text-gray-800 flex items-center mb-3">
            <span className="text-xl mr-2">👨‍👩‍👧‍👦</span> 
            家长指南
          </h3>
          <p className="text-gray-600 mb-4">和孩子一起阅读童话故事，不仅能培养阅读兴趣，还能增进亲子关系。这里有一些小建议：</p>
          <ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
            <li className="flex items-start">
              <div className="text-pink-400 mr-2">💡</div>
              <div>
                <p className="text-sm font-medium text-gray-700">每天固定阅读时间</p>
                <p className="text-xs text-gray-500">建立阅读习惯，让孩子爱上阅读</p>
              </div>
            </li>
            <li className="flex items-start">
              <div className="text-pink-400 mr-2">💬</div>
              <div>
                <p className="text-sm font-medium text-gray-700">读后讨论故事内容</p>
                <p className="text-xs text-gray-500">帮助孩子理解故事中的道理</p>
              </div>
            </li>
            <li className="flex items-start">
              <div className="text-pink-400 mr-2">🎨</div>
              <div>
                <p className="text-sm font-medium text-gray-700">鼓励孩子创作故事</p>
                <p className="text-xs text-gray-500">激发想象力和创造力</p>
              </div>
            </li>
            <li className="flex items-start">
              <div className="text-pink-400 mr-2">🔒</div>
              <div>
                <p className="text-sm font-medium text-gray-700">安全内容保障</p>
                <p className="text-xs text-gray-500">所有内容经过筛选，适合儿童阅读</p>
              </div>
            </li>
          </ul>
        </div>
      </section>

      {/* 底部导航栏 - 更大更醒目 */}
      <nav className="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-md border-t-2 border-pink-200 h-20 flex justify-around items-center z-10 shadow-md">
        <Link to="/home" className="flex flex-col items-center justify-center text-pink-500">
          <span className="text-2xl">🏠</span>
          <span className="text-sm mt-1 font-medium">首页</span>
        </Link>
        <Link to="/generate" className="flex flex-col items-center justify-center text-gray-500 hover:text-pink-500 transition-colors">
          <span className="text-2xl">✨</span>
          <span className="text-sm mt-1 font-medium">创作</span>
        </Link>
        <Link to="/collection" className="flex flex-col items-center justify-center text-gray-500 hover:text-pink-500 transition-colors">
          <span className="text-2xl">❤️</span>
          <span className="text-sm mt-1 font-medium">收藏</span>
        </Link>
        <Link to="/agent" className="flex flex-col items-center justify-center text-gray-500 hover:text-pink-500 transition-colors">
          <span className="text-2xl">🤖</span>
          <span className="text-sm mt-1 font-medium">助手</span>
        </Link>
      </nav>
      </div>
    </div>
  );
}